<template name="imageScroll">
	<view class="imageScBox" v-if="isShow" :class="[scType==1?'aniMove':'',scType==-1?'aniMove2':'']" @tap="toPage" :data-url="initInfo.enter_banner.linkType==7?initInfo.enter_banner.linkUrl:initInfo.enter_banner.innerUrl">
		<image :src="initInfo.enter_banner.icon" mode="widthFix"></image>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	export default{	
		name:'imageScroll',		//组件名称
		// 传递参数
		computed:{
			...mapState({
				initInfo:state=>state.sys.initInfo,
				isLogin: state => state.user.isLogin,
				userInfo:state=>state.user.userInfo
			})
		},
		props:{
			scType:{
				type:Number,
				default:0
			}
		},
		watch:{
			userInfo(newVal){

				if(newVal && newVal.registAward!=0){
					this.close()
				}else{
					this.show()
				}
			}
		},
		// 组件参数
		data(){
			return {
				isShow: false,
				isAni:false
			}
		},
		// 组件方法
		methods:{
			close(){
				this.isShow=false;
			},
			show(){
				this.isShow=true;
			}
		},
		created() {
			setTimeout(()=>{
				if(this.initInfo.enter_banner){		//已配置
					if(this.isLogin){		//已登录
						if(this.userInfo.registAward==0){		//未领取
							this.show()
						}else{	//已领取
							this.close()
						}
					}else{		//未登录
						this.show()
					}
				}else{		//未配置
					this.close()
				}
				
			},3000)
		}
	}
</script>

<style lang="less">
	.imageScBox{
		position: fixed;
		width: 100upx;
		top: 75%;
		right: 0;
		z-index: 99999;
		image{
			width: 100%;
		}
	}
	
	.aniMove{
		animation-name: move1;
		animation-timing-function: linear;
		animation-duration: 500ms;
		animation-delay: 0;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	.aniMove2{
		animation-name: move2;
		animation-timing-function: linear;
		animation-duration: 500ms;
		animation-delay: 0;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	
	@keyframes move1 {
		from{
			right: 0;
		}
		to{
			right: -50upx;
		}
	} 
	
	@keyframes move2 {
		from{
			right: -50upx;
		}
		to{
			right: 0;
		}
	} 
</style>
